import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
import fetch from '../../../../utils/request';
import axios from 'axios'
import { Button, Modal, Upload, message } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { Dragger } = Upload;

class uploadFile extends Component{
  state={
    visible: false,
    fileList: [],
    uploading: false,
  };

  handleClick = () => {
    this.setState({visible:true})
  };

  handleOk = (e) => {
    const { fileList } = this.state;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('file', file);
    });
    formData.append('username', 'root')
    const params = { formData };
    // fetch({
    //   url:'',
    //   method: 'post',
    //   params
    // }).then(res=>{

    // })
    this.setState({
      visible: false
    });

    axios({
      url: '/api/file/uploadFileAndSave',
      method: 'post',
      data: formData,
      }).then(res => {
        if(res.data.code === 0) {
          // sourceUploadBtn = false
          message.success('上传成功')
          this.setState({
            fileList: []  //上传成功，将文件列表置为空
          })
          // this.props.setSaveBtnValue(true)
        }
      })

  }

  handleCancel = () => {
    this.setState({visible:false})
  };

  componentDidMount(){
  };

  render(){
    const { uploading, fileList } = this.state;
    const props ={
      name: 'file',
      multiple: true,
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    }
    return (
      <Fragment>
        <Button type="primary" style={{marginLeft: 24}} onClick={this.handleClick}>上传</Button>
        <Modal
          title="上传文件"
          visible={this.state.visible}
          //bodyStyle={{ padding: '12px 24px' }}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* <Button type="primary">上传文件</Button> */}
          <Dragger {...props} fileList={this.state.fileList} accept={'.doc , .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .html'} multiple={false}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">单击或拖动文件至该区域进行上传文件</p>
            <p className="ant-upload-hint">
              支持单次或批量上传
            </p>
          </Dragger>
        </Modal>
      </Fragment>    
    );
  }
}

const mapStateToProps = (state) => {
  return {
    //dataSource: state.getIn(['Table','dataSource']),
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(uploadFile);